<template>
	<view class="box">

		<view class="title flex-no-horizontal">

			<view class="title-left f-large bold flex-no-horizontal">
				<image :src="dynamicDate.avatar" mode=""></image>
				<view class="title-left-name f-large bold">
					{{dynamicDate.username}}
				</view>
			</view>

			<view class="title-right f-base flex-no-horizontal" v-if="dynamicDate.sensitiveWord !== ''">
				<image src="/static/img/examine-warning.png" mode=""></image>
				含有低风险敏感词
			</view>

		</view>

		<view class="text">
			<text>
				{{dynamicDate.text || dynamicDate.content}}
			</text>
		</view>

		<!-- 图片部分 -->
		<view class="content-img-single" :class="{'content-img-multiple':imgs.length !== 1}" v-if="ifShowImg">
			<image :src="item" :mode="imgs.length !== 1 ? 'aspectFill' : 'widthFix' " v-for="(item,index) in imgs"
				:key="index" @click="previewPhoto(index)"></image>
		</view>

		<!-- 举报审核部分 -->
		<view class="report" v-if="dynamicDate.message">
			<view class="report-title f-base">
				投诉内容
			</view>

			<view class="report-text f-base">
				{{dynamicDate.message}}
			</view>
		</view>

	</view>
</template>

<script>
	/**
	 * @property {Object}			dynamicDate					动态数据
	 * @property {Boolean}			ifShowReport				是否显示举报部分
	 * @property {Boolean}			ifShowImg					是否显示动态图片
	 * 
	 */
	import {
		previewImage
	} from '../../../utility/download.js'
	export default {
		props: {
			dynamicDate:{
				type:Object,
				default (){
					return {}
				}
			},
			ifShowReport:{
				type:Boolean,
				default (){
					return false
				}
			},
			ifShowImg:{
				type:Boolean,
				default (){
					return false
				}
			},
			imgs: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		data() {
			return {

			}
		},
		created() {
			console.log(this.imgs.length)
		},
		methods:{
			//预览图片
			previewPhoto(index) {
				uni.previewImage({
					urls: this.imgs,
					current: index
				})
			},
		}

	}
</script>

<style lang="scss">
	.box {
		padding: 30rpx 40rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid rgba(23, 23, 23, 0.03);
		.title {
			justify-content: space-between;
			margin-bottom: 30rpx;

			.title-left {
				color: #000000;
				width: 55%;
				image {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					
				}
				
				.title-left-name{
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-left: 20rpx;
					width: 75%;
				}
			}

			.title-right {
				color: rgba(235, 91, 51, 1);

				image {
					height: 26rpx;
					width: 26rpx;
				}
			}

		}

		.text {
			margin-bottom: 40rpx;

			text {
				word-wrap: break-word;
				line-height: 54rpx;
			}
		}

		.content-img-single {
			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}

		.content-img-multiple {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: left;
			flex-wrap: wrap;

			image {
				width: 210rpx;
				height: 210rpx;
				margin-left: 20rpx;
				margin-bottom: 20rpx;
				&:nth-child(3n+1){
					margin-left: 0;
				}
			}

		}

		.report {
			margin-top: 48rpx;

			.report-title {
				color: rgba(235, 91, 51, 1);
				margin-bottom: 26rpx;
			}

			.report-text {
				padding: 20rpx 40rpx;
				background-color: rgba(247, 247, 247, 1);
				border-radius: 10rpx;
				border: 1rpx solid rgba(229, 231, 235, 1);
				word-wrap: break-word;
				line-height: 54rpx;
			}

		}

	}
</style>
